<template>
    <div class="mask" v-show="showMask">
        <div class="mask-wrapper" @click="hideMask">
        </div>
        <div class="box">
            <div class="title">温馨提示{{maskInfo.extendtips}}</div>
            <div class="content">
                {{maskInfo.content}}
                <span ref="code">{{dhcode}}</span>
                <p style="margin-top:10px;text-align:center" v-show="copyResult">已复制</p>
            </div>
            <div class="btn">
                <div class="btn-item" ref="copybtn" v-for="(item,index) in maskInfo.btn" :key="index" @click="copy(index)">{{item.btnTitle}}</div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import Clipboard from 'clipboard';
import { mapMutations } from 'vuex';

export default {
    props: {
        showMask: {
            type: Boolean,
            default: false,
        },
        maskInfo: {
            type: Object,
        },
        dhcode: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            copyResult: false,
            maskShow: false,
        };
    },
    methods: {
        copy(index) {
            let btnIndex = this.maskInfo.btn[index].type;
            if (btnIndex === 'hide') {
                console.log('hide');
                this.hideMask();
            }
            if (btnIndex === 'copy') {
                let redeemCode = this.$refs.code.textContent;
                let clipboard = new Clipboard('.btn-item', {
                    text: () => {
                        console.log(redeemCode);
                        return redeemCode;
                    },
                });
                clipboard.on('success', () => {
                    console.log('复制成功');
                    this.copyResult = true;
                    clipboard.destroy();
                });
                clipboard.on('error', () => {
                    console.log('复制失败');
                });
            }
            if (btnIndex === 'back') {
                console.log('back');
                this.$router.back(-1);
                this.userLogout();
            }
            if (btnIndex === 'logout') {
                console.log('logout');
                this.userLogout();
                this.$router.back(-1);
            }
            if (btnIndex === 'login') {
                console.log('login');
                this.hideMask();
                this.$router.push('/login');
            }
        },
        hideMask() {
            this.$emit('mask');
            this.copyResult = false;
        },
        ...mapMutations([
            'userLogout',
        ]),
    },
    watch: {
        showMask(val) {
            this.maskShow = val;
        },
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .mask-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000000;
        opacity: 0.5;
        z-index: 99990;
    }

    .box {
        position: absolute;
        z-index: 99991;
        width: 80%;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        top: 160px;
        min-height: 100px;
        background: #ffffff;
        border-radius: 5px;
        padding: 10px 15px;

        .title {
            color: #333333;
        }

        .content {
            padding-top: 30px;
            padding-bottom: 20px;
            text-align: center;
            line-height: 28px;
            font-size: 14px;
            color: #777777;
        }

        .btn {
            display: flex;
            justify-content: center;

            .btn-item {
                height: 32px;
                width: 84px;
                margin: 0 4px;
                background: #00b5bf;
                text-align: center;
                line-height: 32px;
                border-radius: 5px;
                color: #ffffff;
            }
        }
    }
}
</style>
